<template>
  <div class="all">
    <table id="table">
      <tr>
        <td align="right"><span>信息分类:</span></td>
        <td>
          <el-select v-model="queryParams.theme"
                     placeholder="请选择">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value" />
          </el-select>
        </td>
      </tr>
      <tr>
        <td align="right">文章标题:</td>
        <td>
          <el-input v-model="queryParams.title"
                    placeholder="请输入内容" />
        </td>
      </tr>
      <tr>
        <td align="right">内容:</td>
        <td>
          <div id="editor">
            <tinymce v-model="queryParams.content"
                     :setup="setup"
                     :setting="setting"
                     :height="300" />
          </div>
        </td>
      </tr>
      <tr>
        <td />
        <td>
          <el-button type="primary"
                     @click="commitNew">提交</el-button>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import { insertNewArticle } from '@/api/bbs/article'

export default {
  components: { Tinymce },
  data () {
    return {
      options: [
        {
          value: 0,
          label: '邻里之间'
        },
        {
          value: 1,
          label: '闲物置换'
        },
        {
          value: 2,
          label: '家政服务'
        },
        {
          value: 3,
          label: '建言献策'
        }

      ],
      queryParams: {
        articleid: null,
        authorid: null,
        createtime: null,
        title: null,
        content: null,
        picurls: null,
        commentnumber: 0,
        viewnumber: 0,
        theme: null,
        statusflag: null,
        deleteflag: 0,
        communityid: 1
      }

    }
  },
  created () {
  },
  methods: {
    getNowDate () {
      const date = new Date()
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      let H = date.getHours()
      const mm = date.getMinutes()
      const s = date.getSeconds()
      m = m < 10 ? '0' + m : m
      d = d < 10 ? '0' + d : d
      H = H < 10 ? '0' + H : H
      return y + '-' + m + '-' + d + ' ' + H + ':' + mm + ':' + s
    },
    commitNew () {
      if (this.queryParams.theme == 1) {
        this.queryParams.statusflag = 1
      } else this.queryParams.statusflag = 0
      this.queryParams.createtime = this.getNowDate()
      insertNewArticle(this.queryParams).then(() => {
        this.msgSuccess('发帖成功')
        this.$router.push({ path: 'bbsIndex' })
      })
    }
  },

}
</script>

<style>
.all {
  width: 80%;
  margin: 45px auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
#table {
  padding: 30px 45px;
  color: #6d7e8d;
}

#table tr td {
  padding: 5px 0 5px 15px;
  vertical-align: top;
}
#table tr td:first-child {
  padding-top: 12px;
}
/*.ql-editor {*/
/*  height: 300px;*/
/*  !* width: 1120px; *!*/
/*}*/
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>
